<template>
	<view class="container">
		<!-- 个人信息列表 -->
		<view class="info-list">
			<!-- 头像 -->
			<view class="info-item">
				<text>头像</text>
				<image class="avatar" :src="`/static/${userInfo.avatar}`"  @click="chooseImage" mode="widthFix"></image>
			</view>
			<view @click="changeName" class="info-item">
				<text>昵称</text>
				<text>{{userInfo.nickname}}</text>
			</view>

			<view class="info-item">
				<text>性别</text>
				<picker mode="selector" :range="['男', '女']" @change="onGenderChange">
					<text>{{ userInfo.gender }}</text>
				</picker>
			</view>
			<view class="info-item">
				<text>地址</text>
				<text type="default" @click="manageAddress">管理地址</text>
			</view>

			<view class="info-item">
				<text>购物车</text>
				<text type="default" @click="enterCart">进入</text>
			</view>
			<view class="info-item">
				<text>我的足迹</text>
				<text type="default" @click="checkFootprint">查看</text>
			</view>
			<view class="info-item">
				<text>创作者认证</text>
				<text type="default" @click="checkCertification">查看</text>
			</view>
		</view>

		<!-- 返回按钮 -->
		<view class="back-btn">
			<text type="primary" @click="saveAndBack">返回并保存</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: 'kbblnt.jpg', // 用户头像URL
					nickname: '科比',
					gender: '男',
					address: ''
				}
			};
		},
		methods: {
			changeName(){
				uni.navigateTo({
					 url: '/pages/content/changeName/changeName?nickname=' + encodeURIComponent(this.userInfo.nickname)
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 选择成功后，可以在这里处理图片
						const tempFilePaths = res.tempFilePaths; // 图片的临时文件路径
						// 您可以在这里使用 FileReader API 来读取图片，或者使用其他方式上传图片
					},
					fail: (error) => {
						// 选择失败后的回调
						console.error('选择图片失败：', error);
					},
				});
			},
			onGenderChange(e) {
			  console.log(typeof e.target.value);
			  let value = parseInt(e.target.value, 10); // 转换为数字类型，10表示十进制
			  console.log(typeof value); // 应该输出 'number'
			  
			  if (value === 0) {
			    console.log(value);
			    this.userInfo.gender = '男';
			  } else if (value === 1) {
			    console.log(value);
			    this.userInfo.gender = '女';
			  }
			},
			manageAddress() {
				uni.navigateTo({
					url: '/pages/content/address/address'
				})
			},
			enterCart() {
				uni.navigateTo({
					url: '/pages/content/enterCart/enterCart'
				})
			},

			checkFootprint() {
				console.log('查看我的足迹');
			},

			checkCertification() {
				uni.navigateTo({
					url: '/pages/content/verification/verification'
				})
			},

			saveAndBack() {
				console.log('保存并返回');
				uni.navigateBack({
					delta: 1, // 默认为1，返回上一页面
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 90%;
		margin: auto;
		padding: 20rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.info-list {
		line-height: 120rpx;
		margin-bottom: 40rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;

	}

	.back-btn {
		text-align: center;
		color: #e7763d;
	}
</style>